<template>
<transition 
  @enter="enter"
  @leave="leave"
  >
  <!-- <div class="normal-player" v-show="this.$store.getters.isFullScreen">     -->
  <div class="normal-player" v-show="this.isFullScreen">  
    <div class="player-wrapper">
    <PlayerHeader></PlayerHeader>
    <PlayerMiddle :currentTime="currentTime"></PlayerMiddle>
    <PlayerBottom :totalTime="totalTime" :currentTime="currentTime"></PlayerBottom>
    </div>
  <div class="player-bg">
    <img :src="this.currentSong.picUrl" alt="">
  </div>
  </div>
</transition>
</template>

<script>

import PlayerHeader from './PlayerHeader.vue'
import PlayerMiddle from './PlayerMiddle.vue'
import PlayerBottom from './PlayerBottom.vue'
import {mapGetters,mapActions } from 'vuex'
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'

export default {
  name:"NormalPlayer",
  components:{
    PlayerHeader,
    PlayerMiddle,
    PlayerBottom
  },
  props:{
    currentTime:{
      type:Number,
      required:true,
      default:0
    },
    totalTime:{
      type:Number,
      required:true,
      default:0
    }
  },
  computed:{
    ...mapGetters([
      'isFullScreen',
      'currentSong'
    ])
  },
  methods:{
    enter(el,done){
      Velocity(el, 'transition.shrinkIn', { duration: 650 },function(){
        done()
      })
    }, 
    leave(el,done){
      Velocity(el, 'transition.shrinkOut', { duration: 650 },function(){
        done()
      })
    },
    ...mapActions(['getSongLyric'])
  },
  watch: {
    //监听当前播放的歌曲
    currentSong (newValue, oldValue) {
      if (newValue.id === undefined) {
        return
      }
      //获取歌词明细
      this.getSongLyric(newValue.id);
    }
  },
}
</script>

<style lang="scss" scoped>
.normal-player{
  position:fixed;
  top: 0;
  left:0;
  right: 0;
  bottom: 0;
  .player-wrapper{
    height: 100%;
    width: 100%;
    z-index: 999;
    position: relative;
  }
  .player-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  img{
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    filter: blur(10px);
  }
}
</style>